import PropTypes from 'prop-types';
import React from 'react';

export interface IBackdropProps {
  visible?: boolean;
  children?: React.ReactNode;
  onBackdropClick?: any;
}

export class Backdrop extends React.Component<IBackdropProps, {}> {

  public static propTypes = {
    visible: PropTypes.bool,
    children: PropTypes.node,
    onBackdropClick: PropTypes.func,
  };

  constructor(props: IBackdropProps) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  public handleClick() {
    if (this.props.onBackdropClick) {
      this.props.onBackdropClick();
    }
  }

  public render() {
    if (this.props.visible) {
      return <div className="br-pop-up">
        <div className="br-pop-up__shade" onClick={this.handleClick}></div>
        <div className="br-pop-up__modal">{this.props.children}</div>
      </div>;
    }
    return null;
  }
}
